// 放大镜
class Magnifier{
	constructor(newDetalMagn,newDetalMask,newDetalBigpic) {
	    this.detalMagn = newDetalMagn;
		this.detalMask = newDetalMask;
		this.detalBigpic = newDetalBigpic;
		this.event();
	}
	
	onmouseover(){
		let that = this;
		this.detalMagn.onmouseover = function(){
			that.detalMask.style.display = "block";
			that.detalBigpic.style.display = "block";
		}
	}
	onmouseout(){
		let that = this;
		this.detalMagn.onmouseout = function(){
			that.detalMask.style.display = "none";
			that.detalBigpic.style.display = "none";
		}
	}
	onmousemove(){
		let that = this;
		this.detalMagn.onmousemove = function(evt){
			let e = evt || event;
			let oDetal = document.querySelector("#detal");
			let left = e.pageX - oDetal.offsetLeft - that.detalMask.offsetWidth/2;
			let top = e.pageY - oDetal.offsetTop - that.detalMask.offsetHeight/2;
			if(left < 0){
				left = 0;
			}
			let maxLeft = this.offsetWidth - that.detalMask.offsetWidth;
			if(left > maxLeft){
				left = maxLeft;
			}
			
			if(top < 0){
				top = 0;
			}
			let maxTop = this.offsetHeight - that.detalMask.offsetHeight;
			if(top > maxTop){
				top = maxTop;
			}
			let x = that.detalBigpic.offsetWidth * left / that.detalMask.offsetWidth;
			let y = that.detalBigpic.offsetHeight * top / that.detalMask.offsetHeight;
			that.detalBigpic.style.backgroundPositionX = -x + "px";
			that.detalBigpic.style.backgroundPositionY = -y + "px";
			that.detalMask.style.left = left + "px";
			that.detalMask.style.top = top + "px";
		}
	}
	
	event(){
		this.onmouseover();
		this.onmouseout();
		this.onmousemove();
	}
}

// 点击规格加边框
$(".detal-param-specsUl li").click(function(){
	$(".detal-param-specsUl li").css({
		border: "0",
		width:"62px",
		height:"80px"
	});
	$(this).css({
		border:"2px solid #000",
		width:"58px",
		height:"76px"
	});
});
$(".detal-param-specsUl li img").click(function(){
	$(".detal-param-specsUl li img").css({
		width:"62px",
		height:"80px"
	});
	$(this).css({
		width:"58px",
		height:"76px"
	});
});

$(".detal-param-size li").click(function(){
	$(".detal-param-size li").css({
		border: "1px solid #dedede",
		width:"45px",
		height:"45px"
	});
	$(this).css({
		border: "2px solid #000",
		width:"43px",
		height:"43px"
	});
});

// 当季主推图片划过改变加边框
$(".season-main li img").mouseover(function() {
	$(this).css({
		width: "310px",
		height: "434px",
		border: "2px solid black",
		padding: 3
	});
});
$(".season-main li img").mouseout(function() {
	$(this).css({
		width: "310px",
		height: "434px",
		border: "none",
		padding: 0
	});
});

$(".detal-left-choice li").click(function(){
	$(".detal-left-choice li").css({
		border:"2px solid #fff"
	});
	$(this).css({
		border:"2px solid #000",
	});
});

// 放大镜改变图片
$(".detal-left-choice li").click(function(){
	let a = $(this).index();
	if(a==1){
		$(".detal-left-magn").css({
			backgroundImage:"url(details/detheadbig2.jpg)"
		});
		$(".detal-left-bigpic").css({
			backgroundImage:"url(details/detheadbig22.jpg)"
		});
	}else if(a==2){
		$(".detal-left-magn").css({
			backgroundImage:"url(details/detheadbjg3.jpg)"
		});
		$(".detal-left-bigpic").css({
			backgroundImage:"url(details/detheadbjg3.jpg)"
		});
	}
});

$(".detal-param-specsUl li").click(function(){
	let a = $(this).index();
	if(a==0){
		$(".detal-left-magn").css({
			backgroundImage:"url(details/detheadspe11.jpg)"
		});
		$(".detal-left-bigpic").css({
			backgroundImage:"url(details/detheadspe11.jpg)"
		});
	}else if(a==1){
		$(".detal-left-magn").css({
			backgroundImage:"url(details/detheadspe22.jpg)"
		});
		$(".detal-left-bigpic").css({
			backgroundImage:"url(details/detheadspe22.jpg)"
		});
	}else if(a==2){
		$(".detal-left-magn").css({
			backgroundImage:"url(details/detheadspe33.jpg)"
		});
		$(".detal-left-bigpic").css({
			backgroundImage:"url(details/detheadspe33.jpg)"
		});
	}
});

// 当季主推轮播图
let index = 0
$(".season-main-right").click(function() {
	if (index >-822) {
	    index += -411;
		let left = index + "px";
	    $(".season-main-ul").css({
	        marginLeft: left
	    });
	}
});

$(".season-main-left").click(function() {
    if (index < 0) {
        index += 411;
		let right = index + "px";
        $(".season-main-ul").css({
            marginLeft: index
        });
    }
});
// 加入购物车
$(".param-join-shop").click(function(){
	location.href="shopping.html";
});